import { defineComponent, reactive, watch } from 'vue';
import {
  staticConfigData
} from '../../../data/config';
import {
  ConfigSettingType,
  ConfigType
} from '../../../data/type';
import styles from './index.module.scss';

export default defineComponent({
  name: 'ConfigSetting',
  inheritAttrs: false,
  setup(_props, { attrs, emit }: any) {
    const staticConfig = reactive<ConfigSettingType[]>(staticConfigData);
    const config = reactive<ConfigType>({
      mode: attrs.mode,
      language: attrs.language,
      outputFormat: attrs.outputFormat,
      trim: attrs.trim,
      maxHeight: attrs.maxHeight,
      filename: attrs.filename,
      context: attrs.context
    })
    watch(config, val => {
      emit('update', val)
    })
    return () => (
      <div class={styles.configContainer}>
        <div class={styles.title}>
          <span>配置</span>
        </div>
        <ul class={styles.config}>
          {
            staticConfig.map(item => {
              return <li
                key={item.key}
              >
                <span>
                  {
                    item.label
                  }：
                </span>
                {
                  (() => {
                    switch (item.type) {
                      case 'select':
                        return <el-select
                          popper-append-to-body={false}
                          v-model={config[item.key]}
                        >
                          {
                            item.list.map(item1 => {
                              return <el-option
                                key={item1.value}
                                label={item1.label}
                                value={item1.value}
                                disabled={item1?.disabled ?? false}
                              />
                            })
                          }
                        </el-select>
                      case 'switch':
                        return <el-switch
                          v-model={config[item.key]}
                          active-color='#FFAE0D'
                          inactive-color='#eee'
                          active-value={item.list[0].value}
                          inactive-value={item.list[1].value}
                          active-text={item.list[0].label}
                          inactive-text={item.list[1].label}
                        />
                      case 'input':
                        return <el-input
                          type={item.inputType}
                          v-model={config[item.key]}
                        />
                      case 'radioGroup':
                        return <el-radio-group
                          v-model={config[item.key]}
                        >
                          {
                            item.list.map(item1 => {
                              return <el-radio
                                key={item1.label}
                                label={item1.value}
                                disabled={item1.disabled}
                              >
                              { item1.label }
                            </el-radio>
                            })
                          }
                      </el-radio-group>
                      case 'checkbox':
                        return <el-checkbox-group
                          v-model={config[item.key]}
                        >
                          {
                            item.list.map(item1 => {
                              return <el-checkbox
                                key={item1.value}
                                label={item1.value}
                              >
                                { item1.label }
                              </el-checkbox>
                            })
                          }
                      </el-checkbox-group>
                    }
                  })()
                }
                {
                  item.tip && <el-tooltip
                    content={item.tip}
                    placement={'top'}
                  >
                    <i
                      class='el-icon-question'
                    />
                  </el-tooltip>
                }
              </li>
            })
          }
        </ul>
      </div>
    )
  }
})
